<template>
  <view class="container">
    <view class="bg"></view>
    
    <view id="pageHomeHeader" style="width: 100%;top:0;left:0;background-color: #fff;">
    <view>
      <kt-status-bar-height></kt-status-bar-height>
    <view
      class="header-box"
      style="position: relative;background-color: #fff;"
    :style="{
      width: 'calc(100vw - '+menuButtonWidth+'px)',
      height: navHeight + 'px'
      }">
      
      <view
      class="scroll-view"
        :scroll-x="true"
      style="width: calc(100% - 100rpx);margin-left: 10rpx;"
      >
        <view class="header-box-1">
          <view
          class="header-item header-item-selected">
          {{$i18n.zhToGlobal('交友')}}
        </view>
        <view class="header-item">
          <!-- 购物 -->
           {{$i18n.zhToGlobal('购物')}}
        </view>
        <view class="header-item">
          <!-- 生活 -->
           {{$i18n.zhToGlobal('生活')}}
        </view>
        <view class="header-item">
          <!-- 岗位 -->
           {{$i18n.zhToGlobal('岗位')}}
        </view>
        <view class="header-item">
          <!-- 家政 -->
           {{$i18n.zhToGlobal('家政')}}
        </view>
        <view class="header-item">
          <!-- 同城 -->
           {{$i18n.zhToGlobal('同城')}}
        </view>
      </view>
      </view>
      <view style="width: 70rpx;height: 100%;position: absolute;right: 0;top: 50%;transform: translateY(-50%);">
        <image
        style="width: 50rpx;height: 50rpx;position: absolute;top:50%;transform: translateY(-50%);"
        :src="$kt.file.byPath('icon/addRound.svg')"
        mode="widthFix"
        ></image>
      </view>
    </view>
    </view>
    <view>
      <view
        style="width: 100%;height: 5rpx;background-color: #eee;"
        ></view>

      <view class="second-box" style="position: relative;background-color: #fff;padding: 11rpx;">
        <view class="second-box-box">
          <view class="second-box-item"
          :class="{'second-box-item-selected':true}"
          >{{$i18n.zhToGlobal('推荐')}}</view>
          <view class="second-box-item">{{$i18n.zhToGlobal('公开朋友圈')}}</view>
          <view class="second-box-item">{{$i18n.zhToGlobal('好友朋友圈')}}</view>
        </view>
        <image
        style="width: 40rpx;height: 40rpx;position: absolute;top:50%;transform: translateY(-50%);right: 50rpx;"
        :src="$kt.file.byPath('icon/search.svg')"
        ></image>

      </view>
    </view>
  </view>
    <view>
      <!-- <UserRecommendPanel></UserRecommendPanel> -->
       <user-recommend-panel
       :height="'calc(100vh - '+pageHomeHeaderHeight+'px - 100rpx)'"
       ></user-recommend-panel>
    </view>
    
  </view>
</template>

<script>


export default {
  data() {
    return {
      navHeight: 48,
      menuButtonWidth: 0,
      pageHomeHeaderHeight: 0,
    }
  },
  mounted() {
    // #ifdef MP-WEIXIN
    this.navHeight = uni.getSystemInfoSync().system.indexOf("ios") != -1 ? 44 : 48;
    // 获取胶囊信息
    this.menuButtonWidth = wx.getMenuButtonBoundingClientRect().width;
    console.log(this.menuButtonWidth,"获取胶囊信息");
    // #endif
    // 获取pageHomeHeader的高度
    this.$nextTick(() => {
      // uniapp的获取元素高度的方法
      uni.createSelectorQuery().in(this).select('#pageHomeHeader').boundingClientRect((rect) => {
        console.log(rect,"获取pageHomeHeader的高度")
        this.pageHomeHeaderHeight = rect.height;
      }).exec()
    })
  },

  methods: {
  }
}
</script>

<style lang="scss" scoped>
.bg{
  position:fixed;
  left: 0;
  top: 0;
  z-index: -1;
  width: 100vw;
  height: 100vh;
  background-color: #f9f9f9;
}

.header-box-1{
  padding: 0 10rpx;
  box-sizing: border-box;
  // 不换行
  white-space: nowrap;
  .header-item{
    display: inline-block;
    font-size: 36rpx;
    letter-spacing: 3rpx;
    margin-right: 5rpx;
    padding: 10rpx 20rpx;
  }
  .header-item-selected{
    font-weight: bold;
  }
}

.scroll-view{
  position: absolute;
  top:50%;
  transform: translateY(-50%);

  // 超出滚动
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  -ms-overflow-style: none;  
  scrollbar-width: none; 
  // 隐藏滚动条
  &::-webkit-scrollbar {
    width: 0;
    height: 1rpx;
    display: none;
  }
  // 滚动
  &::-webkit-scrollbar-thumb {
    background-color: #fff;
    border-radius: 0;
  }

}
// 不显示滚动条
::-webkit-scrollbar {
  width: 0;
  height: 1rpx;
  display: none;
}

.second-box{
  width: 100%;
  .second-box-box{
    width: calc(100% - 100rpx);
    // 不换行
    white-space: nowrap;
    // 超出滚动
    overflow-x: auto;
    .second-box-item{
      display: inline-block;
      font-size: 32rpx;
      letter-spacing: 3rpx;
      margin-right: 5rpx;
      padding: 10rpx 20rpx;
      background-color: #fff;
      border-radius: 10rpx;
    }
    .second-box-item-selected{
      font-weight: bold;
    }
  }
}

</style>